<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击我发送get形式的ajax</button>
    <script>
        let btn  = document.querySelector("button");
        btn.onclick = function(){

            /* 
            发送ajax的时候 ：会有 5种状态的变化 
            变化可以通过 xhr.readyState 来查看
               0 ： xhr 初始化了，但是没有调用 open
               1 ： xhr 已经调用open方法 但是 还有没有调用 send方法。send的时候 就会发送http请求
               2 : ajax发送已经成功 等待服务器处理
                 通过一个事件来捕获 readyState的变化
               3 ： 服务器部分处理完毕，返还头部已经可用。
               4 : 服务器返还成功 
                // 使用最多的状态是  4 ；    
            */

            /* 
                除了判断ajax状态之后 ，还需要判断 http的状态码；
                // 通过ajax 获取http的状态码 ，服务器返还的状态码
                xhr.status
            
                1xx :等待有关
                2xx : 和成功有关
                3xx : 和重定向有关
                4xx ： 和资源错误有关
                5xx:  和服务器错误有关
            
            */


            // 发送ajax
            let xhr = new XMLHttpRequest();
            // 如果是IE8 及以下 new ActiveXobject();
            console.log(xhr.readyState); // 初始化了，没有调用open方法
            xhr.open("get","/get?name=zhangsan&age=20");
            console.log(xhr.readyState); // open调用了，还没有send
            xhr.send();

            // xhr.onreadystatechange = function(){
            //     // 可以捕捉到 readyState的  2 、3 4 的状态
            //     console.log(xhr.readyState);
            //     if(xhr.readyState===4 && xhr.status>=200 && xhr.status<300){
            //         console.log(xhr.status);
            //         // 证明返还成功,获取结果值
            //         console.log(xhr.responseText);
            //     }
            // }

            xhr.onload = function(){  // 是 xhr.readyState === 4的简写形式 
                if( xhr.status>=200 && xhr.status<300){
                    console.log(xhr.readyState);
                    console.log(xhr.responseText);
                }
            }

        }


    </script>
</body>
</html>